<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Butterfly-主题配置-1 | 小苑の博客</title><meta name="author" content="coderyh"><meta name="copyright" content="coderyh"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="主题文档  语言修改站点配置文件_config.yaml 默认语言是 en 注意支持三种配置文件  default（en） zh-CN（简体中文） zh-TW（繁体中文）  导航栏设置参数设置主题配置文件中 1234nav:  logo: #image  display_title: true  fixed: false # fixed navigation bar     参数 解释    l">
<meta property="og:type" content="article">
<meta property="og:title" content="Butterfly-主题配置-1">
<meta property="og:url" content="http://localhost:4000/blog/20231208180125/index.html">
<meta property="og:site_name" content="小苑の博客">
<meta property="og:description" content="主题文档  语言修改站点配置文件_config.yaml 默认语言是 en 注意支持三种配置文件  default（en） zh-CN（简体中文） zh-TW（繁体中文）  导航栏设置参数设置主题配置文件中 1234nav:  logo: #image  display_title: true  fixed: false # fixed navigation bar     参数 解释    l">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://localhost:8080/image?1702029685000">
<meta property="article:published_time" content="2023-12-08T10:01:25.000Z">
<meta property="article:modified_time" content="2024-01-03T15:10:34.387Z">
<meta property="article:author" content="coderyh">
<meta property="article:tag" content="Hexo">
<meta property="article:tag" content="Butterfly">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://localhost:8080/image?1702029685000"><link rel="shortcut icon" href="/blog/img/favicon.png"><link rel="canonical" href="http://localhost:4000/blog/20231208180125/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/blog/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/blog/',
  algolia: undefined,
  localSearch: {"path":"/blog/./search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: {"limitDay":365,"position":"top","messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated."},
  highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: true,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Butterfly-主题配置-1',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2024-01-03 23:10:34'
}</script><script>(win=>{
      win.saveToLocal = {
        set: (key, value, ttl) => {
          if (ttl === 0) return
          const now = Date.now()
          const expiry = now + ttl * 86400000
          const item = {
            value,
            expiry
          }
          localStorage.setItem(key, JSON.stringify(item))
        },
      
        get: key => {
          const itemStr = localStorage.getItem(key)
      
          if (!itemStr) {
            return undefined
          }
          const item = JSON.parse(itemStr)
          const now = Date.now()
      
          if (now > item.expiry) {
            localStorage.removeItem(key)
            return undefined
          }
          return item.value
        }
      }
    
      win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        script.onerror = reject
        script.onload = script.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          script.onload = script.onreadystatechange = null
          resolve()
        }

        Object.keys(attr).forEach(key => {
          script.setAttribute(key, attr[key])
        })

        document.head.appendChild(script)
      })
    
      win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onerror = reject
        link.onload = link.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          link.onload = link.onreadystatechange = null
          resolve()
        }
        document.head.appendChild(link)
      })
    
      win.activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
        if (t === 'dark') activateDarkMode()
        else if (t === 'light') activateLightMode()
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
      const detectApple = () => {
        if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
          document.documentElement.classList.add('apple')
        }
      }
      detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>(()=>{
  const $loadingBox = document.getElementById('loading-box')
  const $body = document.body
  const preloader = {
    endLoading: () => {
      $body.style.overflow = ''
      $loadingBox.classList.add('loaded')
    },
    initLoading: () => {
      $body.style.overflow = 'hidden'
      $loadingBox.classList.remove('loaded')
    }
  }

  preloader.initLoading()
  window.addEventListener('load',() => { preloader.endLoading() })

  if (false) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
})()</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/blog/img/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/blog/archives/"><div class="headline">文章</div><div class="length-num">25</div></a><a href="/blog/tags/"><div class="headline">标签</div><div class="length-num">16</div></a><a href="/blog/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/blog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 导航</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/blog/navigation/work/"><i class="fa-fw fas fa-coffee"></i><span> 工作</span></a></li><li><a class="site-page child" href="/blog/navigation/moyu/"><i class="fa-fw fas fa-th-list"></i><span> 摸鱼</span></a></li><li><a class="site-page child" href="/blog/navigation/code/"><i class="fa-fw fas fa-code"></i><span> 开发</span></a></li><li><a class="site-page child" href="/blog/navigation/design/"><i class="fa-fw fas fa-pencil-alt"></i><span> 设计</span></a></li><li><a class="site-page child" href="/blog/navigation/resource/"><i class="fa-fw fas fa-book"></i><span> 资源</span></a></li><li><a class="site-page child" href="/blog/navigation/tool/"><i class="fa-fw fas fa-wrench"></i><span> 工具</span></a></li><li><a class="site-page child" href="/blog/navigation/project/"><i class="fa-fw fas fa-project-diagram"></i><span> 项目</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-desktop"></i><span> 软件</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/blog/software/usual/"><i class="fa-fw fas fa-desktop"></i><span> 常用</span></a></li><li><a class="site-page child" href="/blog/software/code/"><i class="fa-fw fas fa-code"></i><span> 开发</span></a></li><li><a class="site-page child" href="/blog/software/open/"><i class="fa-fw fas fa-code-branch"></i><span> 开源</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-compass"></i><span> 目录</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/blog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/blog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/blog/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/blog/gallery/"><i class="fa-fw fas fa-images"></i><span> 图库</span></a></div><div class="menus_item"><a class="site-page" href="/blog/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/blog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-user"></i><span> 设置</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/blog/pro/"><i class="fa-fw fas fa-user"></i><span> 页面管理</span></a></li><li><a class="site-page child" href="/blog/admin/"><i class="fa-fw fas fa-user"></i><span> 后台管理</span></a></li><li><a class="site-page child" href="/blog/bridge/"><i class="fa-fw fas fa-cog"></i><span> 配置管理</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('http://localhost:8080/image?1702029685000')"><nav id="nav"><span id="blog-info"><a href="/blog/" title="小苑の博客"><span class="site-name">小苑の博客</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/blog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 导航</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/blog/navigation/work/"><i class="fa-fw fas fa-coffee"></i><span> 工作</span></a></li><li><a class="site-page child" href="/blog/navigation/moyu/"><i class="fa-fw fas fa-th-list"></i><span> 摸鱼</span></a></li><li><a class="site-page child" href="/blog/navigation/code/"><i class="fa-fw fas fa-code"></i><span> 开发</span></a></li><li><a class="site-page child" href="/blog/navigation/design/"><i class="fa-fw fas fa-pencil-alt"></i><span> 设计</span></a></li><li><a class="site-page child" href="/blog/navigation/resource/"><i class="fa-fw fas fa-book"></i><span> 资源</span></a></li><li><a class="site-page child" href="/blog/navigation/tool/"><i class="fa-fw fas fa-wrench"></i><span> 工具</span></a></li><li><a class="site-page child" href="/blog/navigation/project/"><i class="fa-fw fas fa-project-diagram"></i><span> 项目</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-desktop"></i><span> 软件</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/blog/software/usual/"><i class="fa-fw fas fa-desktop"></i><span> 常用</span></a></li><li><a class="site-page child" href="/blog/software/code/"><i class="fa-fw fas fa-code"></i><span> 开发</span></a></li><li><a class="site-page child" href="/blog/software/open/"><i class="fa-fw fas fa-code-branch"></i><span> 开源</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-compass"></i><span> 目录</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/blog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/blog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/blog/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/blog/gallery/"><i class="fa-fw fas fa-images"></i><span> 图库</span></a></div><div class="menus_item"><a class="site-page" href="/blog/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/blog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-user"></i><span> 设置</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/blog/pro/"><i class="fa-fw fas fa-user"></i><span> 页面管理</span></a></li><li><a class="site-page child" href="/blog/admin/"><i class="fa-fw fas fa-user"></i><span> 后台管理</span></a></li><li><a class="site-page child" href="/blog/bridge/"><i class="fa-fw fas fa-cog"></i><span> 配置管理</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Butterfly-主题配置-1</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-12-08T10:01:25.000Z" title="发表于 2023-12-08 18:01:25">2023-12-08</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-01-03T15:10:34.387Z" title="更新于 2024-01-03 23:10:34">2024-01-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/blog/categories/%E4%B8%BB%E9%A2%98/">主题</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">6.1k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>24分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Butterfly-主题配置-1"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><blockquote>
<p><a target="_blank" rel="noopener" href="https://butterfly.js.org/">主题文档</a></p>
</blockquote>
<h2 id="语言"><a href="#语言" class="headerlink" title="语言"></a>语言</h2><p>修改站点配置文件<code>_config.yaml</code></p>
<p>默认语言是 en</p>
<p>注意支持三种配置文件</p>
<ul>
<li>default（en）</li>
<li>zh-CN（简体中文）</li>
<li>zh-TW（繁体中文）</li>
</ul>
<h2 id="导航栏设置"><a href="#导航栏设置" class="headerlink" title="导航栏设置"></a>导航栏设置</h2><h3 id="参数设置"><a href="#参数设置" class="headerlink" title="参数设置"></a>参数设置</h3><p>主题配置文件中</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">nav:</span></span><br><span class="line">  <span class="attr">logo:</span> <span class="comment">#image</span></span><br><span class="line">  <span class="attr">display_title:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">fixed:</span> <span class="literal">false</span> <span class="comment"># fixed navigation bar</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>参数</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>logo</td>
<td>网站的 logo，支持图片，直接填入图片链接</td>
</tr>
<tr>
<td>display_title</td>
<td>是否显示网站标题，填写 true 或者 false</td>
</tr>
<tr>
<td>fixed</td>
<td>是否固定状态栏，填写 true 或者 false</td>
</tr>
</tbody></table>
<h3 id="菜单-目录"><a href="#菜单-目录" class="headerlink" title="菜单&#x2F;目录"></a>菜单&#x2F;目录</h3><p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">Home:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-home</span></span><br><span class="line"><span class="attr">Archives:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-archive</span></span><br><span class="line"><span class="attr">Tags:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-tags</span></span><br><span class="line"><span class="attr">Categories:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-folder-open</span></span><br><span class="line"><span class="string">List||fas</span> <span class="attr">fa-list:</span></span><br><span class="line">  <span class="attr">Music:</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line">  <span class="attr">Movie:</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br><span class="line"><span class="attr">Link:</span> <span class="string">/link/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-link</span></span><br><span class="line"><span class="attr">About:</span> <span class="string">/about/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-heart</span></span><br></pre></td></tr></table></figure>

<p>必须是<code>/xxx/</code>后面<code>||</code>分开，然后写图标名。</p>
<p>如果不希望显示图标，图标名可不写。</p>
<p>默认子目录是展开的，如果你想要隐藏，在子目录添加<code>hide</code>。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">List||fas</span> <span class="string">fa-list||hide:</span></span><br><span class="line">  <span class="attr">Music:</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line">  <span class="attr">Movie:</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br></pre></td></tr></table></figure>

<p><strong>注意：</strong>导航的文字可以自行更改</p>
<p>例如：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line">  <span class="string">首頁:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-home</span></span><br><span class="line">  <span class="string">時間軸:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-archive</span></span><br><span class="line">  <span class="string">標籤:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-tags</span></span><br><span class="line">  <span class="string">分類:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-folder-open</span></span><br><span class="line">  <span class="string">清單||fa</span> <span class="attr">fa-heartbeat:</span></span><br><span class="line">    <span class="string">音樂:</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line">    <span class="string">照片:</span> <span class="string">/Gallery/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-images</span></span><br><span class="line">    <span class="string">電影:</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br><span class="line">  <span class="string">友鏈:</span> <span class="string">/link/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-link</span></span><br><span class="line">  <span class="string">關於:</span> <span class="string">/about/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-heart</span></span><br></pre></td></tr></table></figure>



<blockquote>
<p>ps：打开标签页面显示 <code>Cannot Get /xxx/</code></p>
</blockquote>
<p>执行命令生成对应导航文件（会在根目录的<code>source</code>文件夹下新建一个<code>tags</code>文件夹，然后在<code>tags</code>文件夹下新建一个<code>index.md</code>文件）</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page tags</span><br></pre></td></tr></table></figure>

<p>编辑<code>index.md</code>文件，如下：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">tags</span></span><br><span class="line"><span class="attr">type:</span> <span class="string">tags</span></span><br><span class="line"><span class="attr">layout:</span> <span class="string">&quot;tags&quot;</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2023-12-08 17:15:13</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure>

<p><code>title</code>为该网页的名字。注意，<code>layout</code>是最重要的选项，后面的参数对应的是你主题文件夹下<code>layout</code>文件夹下<code>同名</code>的布局文件。</p>
<p>其它页面同理。</p>
<h2 id="代码（Code-Blocks）"><a href="#代码（Code-Blocks）" class="headerlink" title="代码（Code Blocks）"></a>代码（Code Blocks）</h2><blockquote>
<p>代码块中的所有功能只适用于 Hexo 自带的代码渲染，如果使用第三方的渲染器，不一定有效。</p>
</blockquote>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 代码高亮主题</span></span><br><span class="line"><span class="attr">highlight_theme:</span> <span class="string">mac</span>			<span class="comment"># darker | pale night | light | ocean | mac | mac light | false</span></span><br><span class="line"><span class="comment"># 代码复制</span></span><br><span class="line"><span class="attr">highlight_copy:</span> <span class="literal">true</span></span><br><span class="line"><span class="comment"># 代码语言</span></span><br><span class="line"><span class="attr">highlight_lang:</span> <span class="literal">true</span></span><br><span class="line"><span class="comment"># 代码框展开/关闭</span></span><br><span class="line"><span class="attr">highlight_shrink:</span> <span class="literal">false</span>			<span class="comment"># true：不展开 | false：展开 | none：不显示按钮</span></span><br><span class="line"><span class="comment"># 代码高度设置</span></span><br><span class="line"><span class="attr">highlight_height_limit:</span> <span class="literal">false</span> 	<span class="comment"># unit: px</span></span><br><span class="line"><span class="comment"># 代码换行</span></span><br><span class="line"><span class="attr">code_word_wrap:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>



<h3 id="代码高亮"><a href="#代码高亮" class="headerlink" title="代码高亮"></a>代码高亮</h3><p><code>Butterfly</code> 支持6种代码高亮样式：<code>darker | pale night | light | ocean | mac | mac light | false</code></p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight_theme:</span> <span class="string">light</span></span><br></pre></td></tr></table></figure>



<h3 id="代码复制"><a href="#代码复制" class="headerlink" title="代码复制"></a>代码复制</h3><p>主题支持代码复制功能</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight_copy:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>



<h3 id="代码框展开-关闭"><a href="#代码框展开-关闭" class="headerlink" title="代码框展开&#x2F;关闭"></a>代码框展开&#x2F;关闭</h3><p>在默认情况，代码框自动展开，可设置是否所有代码框都展开状态，点击<code>&gt;</code>可展开代码。</p>
<ul>
<li>true 全部代码框不展开，需点击<code>&gt;</code>打开</li>
<li>false 代码框展开，有<code>&gt;</code>点击按钮</li>
<li>none 不展示<code>&gt;</code>按钮</li>
</ul>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight_shrink:</span> <span class="literal">true</span> <span class="comment">#代碼框不展開，需點擊 &#x27;&gt;&#x27; 打開</span></span><br></pre></td></tr></table></figure>



<h3 id="代码换行"><a href="#代码换行" class="headerlink" title="代码换行"></a>代码换行</h3><p>在默认情况下，Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开放这个功能。</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">code_word_wrap:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>如果你是使用 highlight 渲染，需要找到你站点的 Hexo 配置文件 <code>_config.yaml</code>，将 <code>line_number</code> 改成 <code>false</code>。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">false</span> <span class="comment"># &lt;- 改這裏</span></span><br><span class="line">  <span class="attr">auto_detect:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">tab_replace:</span></span><br></pre></td></tr></table></figure>

<p>如果你是使用 prismjs 渲染，需要找到你站点的 Hexo 配置文件 <code>_config.yaml</code>，将 <code>line_number</code> 改成 <code>false</code>。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">prismjs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">preprocess:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">false</span> <span class="comment"># &lt;- 改這裏</span></span><br><span class="line">  <span class="attr">tab_replace:</span> <span class="string">&#x27;&#x27;</span></span><br></pre></td></tr></table></figure>



<h3 id="代码高度限制"><a href="#代码高度限制" class="headerlink" title="代码高度限制"></a>代码高度限制</h3><blockquote>
<p>3.7.0 及以上支持</p>
</blockquote>
<p>可配置代码高度限制，超出的部分会隐藏，并显示展开按钮。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight_height_limit:</span> <span class="literal">false</span> <span class="comment"># unit: px</span></span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ol>
<li>单位是 <code>px</code>，直接添加数字，如 200</li>
<li>实际限制高度为 <code>highlight_height_limit + 30 px</code>，多增加 30px 显示，目的是避免代码高度只超出 highlight_height_limit 一点时，出现展开按钮，展开没按钮。</li>
<li>不适用于隐藏后的代码块（css 设置 display:true）</li>
</ol>
<h2 id="社交图标（Social-Settings）"><a href="#社交图标（Social-Settings）" class="headerlink" title="社交图标（Social Settings）"></a>社交图标（Social Settings）</h2><p>Butterfly 支持 <a target="_blank" rel="noopener" href="https://fontawesome.com/icons?from=io">font-awesome v6</a> 图标</p>
<p>书写格式 <code>图标名: url || 描述性文字 || color</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">social:</span></span><br><span class="line">  <span class="attr">fab fa-github:</span> <span class="string">https://github.com/xxxxx</span> <span class="string">||</span> <span class="string">Github</span> <span class="string">||</span> <span class="string">&quot;#hdhfbb&quot;</span></span><br><span class="line">  <span class="attr">fas fa-envelope:</span> <span class="string">mailto:xxxxxx@gmail.com</span> <span class="string">||</span> <span class="string">Email</span> <span class="string">||</span> <span class="string">&quot;#000000&quot;</span></span><br></pre></td></tr></table></figure>





<h2 id="头像"><a href="#头像" class="headerlink" title="头像"></a>头像</h2><p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">avatar:</span></span><br><span class="line">  <span class="attr">img:</span> <span class="string">/img/avatar.png</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">true</span> <span class="comment"># 頭像會一直轉圈</span></span><br></pre></td></tr></table></figure>





<h2 id="顶部图"><a href="#顶部图" class="headerlink" title="顶部图"></a>顶部图</h2><blockquote>
<p>如果不要显示顶部图,可直接配置 <code>disable_top_img: true</code></p>
</blockquote>
<blockquote>
<p>顶部图的获取顺序，如果都没有设置，则不显示顶部图。</p>
<ol>
<li><p>页面顶部图的获取顺序：</p>
<p><code>各自配置的 top_img</code> &gt; <code>配置文件的 default_top_img</code></p>
</li>
<li><p>文章页顶部图的获取顺序</p>
<p><code>各自配置的 top_img</code> &gt; <code>cover</code> &gt; <code>配置文件的 default_top_img</code></p>
</li>
</ol>
</blockquote>
<p>配置中的值:</p>
<table>
<thead>
<tr>
<th>配置</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>index_img</td>
<td>主页的 top_img</td>
</tr>
<tr>
<td>default_top_img</td>
<td>默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img</td>
</tr>
<tr>
<td>archive_img</td>
<td>归档页面的 top_img</td>
</tr>
<tr>
<td>tag_img</td>
<td>tag 子页面的 top_img</td>
</tr>
<tr>
<td>tag_per_img</td>
<td>tag 子页面的 top_img，可配置每个 tag 的 top_img</td>
</tr>
<tr>
<td>category_img</td>
<td>category 子页面的 top_img</td>
</tr>
<tr>
<td>category_per_img</td>
<td>category 子页面的 top_img，可配置每个 category 的 top_img</td>
</tr>
</tbody></table>
<p>其它页面（tags&#x2F;categories&#x2F;自建页面）和文章页的 <code>top_img</code> ，请到对应的 md 页面设置 <code>front-matter</code> 中的 top_img</p>
<p>以上所有的 top_img 可配置以下值</p>
<blockquote>
<p>3.2.0 以下的版本只支持</p>
<ul>
<li>留空，true 和 false-显示默认的颜色</li>
<li>img链接-显示所配置的图片</li>
</ul>
</blockquote>
<table>
<thead>
<tr>
<th>配置的值</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td>留空</td>
<td>显示默认的 top_img（如果有），否则显示默认的颜色（文章页top_img留空的话，会显示 cover 的值）</td>
</tr>
<tr>
<td>img 链接</td>
<td>图片的链接，显示所配置的图片</td>
</tr>
<tr>
<td>颜色</td>
<td>对应的颜色（HEX值 - #0000FF）(RGB值 - rgb(0,0,255))（颜色单词-orange）（渐变色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)）</td>
</tr>
<tr>
<td>transparent</td>
<td>透明</td>
</tr>
<tr>
<td>false</td>
<td>不显示 top_img</td>
</tr>
</tbody></table>
<p><code>tag_per_img</code> 和 <code>category_per_img</code> 是 3.2.0 新增的內容，可对 tag 和 category 进行单独的配置。</p>
<p>并不推荐为每个 tag 和 category 都配置不同的顶部图，因为配置太多拖慢生成速度</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">tag_per_img：</span></span><br><span class="line">  <span class="attr">aplayer:</span> <span class="string">https://xxxxxx.png</span></span><br><span class="line">  <span class="attr">android:</span> <span class="string">ddddddd.png</span></span><br><span class="line">  </span><br><span class="line"><span class="string">category_per_img：</span></span><br><span class="line">  <span class="string">隨想:</span> <span class="string">hdhdh.png</span></span><br><span class="line">  <span class="string">推薦:</span> <span class="string">ddjdjdjd.png</span></span><br></pre></td></tr></table></figure>





<h2 id="文章封面"><a href="#文章封面" class="headerlink" title="文章封面"></a>文章封面</h2><p>文章的 markdown 文档上，在 <code>Front-matter</code> 添加 <code>cover</code>，并填上要展示的图片地址。</p>
<p>如果不配置 <code>cover</code>，可以设置显示默认的 cover。</p>
<p>如果不想在首页展示 cover，可以设置为 false。</p>
<blockquote>
<p>文章封面的获取顺序：<code>Front-matter</code> 的 <code>cover</code> &gt; <code>配置文件的 default_cover</code> &gt; <code>false</code></p>
</blockquote>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">cover:</span></span><br><span class="line">  <span class="comment"># 是否显示文章封面</span></span><br><span class="line">  <span class="attr">index_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">aside_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">archives_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 封面显示的位置</span></span><br><span class="line">  <span class="comment"># 三个值可配置 left , right , both</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">both</span></span><br><span class="line">  <span class="comment"># 当没有设置 cover 时，默认的封面显示</span></span><br><span class="line">  <span class="attr">default_cover:</span> </span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>参数</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>index_enable</td>
<td>主页是否显示文章封面图</td>
</tr>
<tr>
<td>aside_enable</td>
<td>侧边栏是否显示文章封面图</td>
</tr>
<tr>
<td>archives_enable</td>
<td>归档页面是否显示文章封面图</td>
</tr>
<tr>
<td>position</td>
<td>主页卡片文章封面的显示位置<br />-left：全部显示左边<br />-right：全部显示在右边<br />-both：封面位置以左右左右轮流显示</td>
</tr>
<tr>
<td>default_cover</td>
<td>默认的 cover，可配置图片链接，颜色，渐变色等</td>
</tr>
</tbody></table>
<p>当配置多张图片时，会随机选择一张作为 cover，此时写法应为：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">default_cover:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg.png</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg2.png</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg3.png</span></span><br></pre></td></tr></table></figure>



<h2 id="页面-meta-显示"><a href="#页面-meta-显示" class="headerlink" title="页面 meta 显示"></a>页面 meta 显示</h2><p>这个选项是用来显示文章的相关信息的。</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_meta:</span></span><br><span class="line">  <span class="attr">page:</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">both</span> <span class="comment"># created or updated or both 主頁文章日期是創建日或者更新日或都顯示</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">relative</span> <span class="comment"># date/relative 顯示日期還是相對日期</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span> <span class="comment"># true or false 主頁是否顯示分類</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">true</span> <span class="comment"># true or false 主頁是否顯示標籤</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span> <span class="comment"># true or false 顯示描述性文字</span></span><br><span class="line">  <span class="attr">post:</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">both</span> <span class="comment"># created or updated or both 文章頁日期是創建日或者更新日或都顯示</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">relative</span> <span class="comment"># date/relative 顯示日期還是相對日期</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span> <span class="comment"># true or false 文章頁是否顯示分類</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">true</span> <span class="comment"># true or false 文章頁是否顯示標籤</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span> <span class="comment"># true or false 顯示描述性文字</span></span><br></pre></td></tr></table></figure>



<h2 id="主页文章筛选"><a href="#主页文章筛选" class="headerlink" title="主页文章筛选"></a>主页文章筛选</h2><p>因为主题UI的关系，<code>主页文章筛选</code>只支持<code>自动筛选</code>和<code>文章页description</code>。</p>
<p>在 Butterfly 里，有四种可供选择</p>
<ol>
<li><code>description</code>：只显示 description</li>
<li><code>both</code>：优先选择 description，如果没有配置 description，则显示自动筛选内容</li>
<li><code>auto_excerpt</code>：只显示自动筛选</li>
<li><code>false</code>：不显示文章内容</li>
</ol>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">index_post_content:</span></span><br><span class="line">  <span class="attr">method:</span> <span class="number">3</span></span><br><span class="line">  <span class="attr">length:</span> <span class="number">500</span> <span class="comment"># if you set method to 2 or 3, the length need to config</span></span><br></pre></td></tr></table></figure>





<h2 id="页面锚点"><a href="#页面锚点" class="headerlink" title="页面锚点"></a>页面锚点</h2><p>开启页面锚点后，当你在进行滚动时，页面链接会根据标题ID进行替换</p>
<p>（注意：每替换一次，会留下一个历史记录。所以如果一篇文章有很多锚点的话，网页的历史记录会很多。）</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># anchor</span></span><br><span class="line"><span class="attr">anchor:</span></span><br><span class="line">  <span class="comment"># when you scroll, the URL will update according to header id.</span></span><br><span class="line">  <span class="attr">auto_update:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Click the headline to scroll and update the anchor</span></span><br><span class="line">  <span class="attr">click_to_scroll:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>



<h2 id="复制相关配置"><a href="#复制相关配置" class="headerlink" title="复制相关配置"></a>复制相关配置</h2><p>可配置网站是否可以复制，复制的内容是否添加版权信息</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># copy settings</span></span><br><span class="line"><span class="comment"># copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)</span></span><br><span class="line"><span class="attr">copy:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">copyright:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">limit_count:</span> <span class="number">50</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>配置</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>enable</td>
<td>是否开启网站复制权限</td>
</tr>
<tr>
<td>copyright</td>
<td>复制的内容后面加上版权信息</td>
</tr>
<tr>
<td>enable</td>
<td>是否开启复制版权信息添加</td>
</tr>
<tr>
<td>limit_count</td>
<td>字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息</td>
</tr>
</tbody></table>
<h2 id="文章页相关配置"><a href="#文章页相关配置" class="headerlink" title="文章页相关配置"></a>文章页相关配置</h2><h3 id="文章版权"><a href="#文章版权" class="headerlink" title="文章版权"></a>文章版权</h3><p>为你的博客文章展示文章版权和许可协议。</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_copyright:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">decode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">author_href:</span></span><br><span class="line">  <span class="attr">license:</span> <span class="string">CC</span> <span class="string">BY-NC-SA</span> <span class="number">4.0</span></span><br><span class="line">  <span class="attr">license_url:</span> <span class="string">https://creativecommons.org/licenses/by-nc-sa/4.0/</span></span><br></pre></td></tr></table></figure>

<p>由于 <code>Hexo 4.1</code> 开始，默认对网站进行解码，以至于如果是中文网址，会被解码，可设置 <code>decode: true</code> 来显示中文网址。</p>
<p>如果有文章（例如：转载文章）不需要显示版权，可以在文章 Front-matter 单独设置</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">copyright:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<p>从 <code>3.0.0</code> 开始，支持对单独文章设置版权信息，可以在文章 Front-matter 单独设置</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">copyright_author:</span> <span class="string">xxxx</span></span><br><span class="line"><span class="attr">copyright_author_href:</span> <span class="string">https://xxxxxx.com</span></span><br><span class="line"><span class="attr">copyright_url:</span> <span class="string">https://xxxxxx.com</span></span><br><span class="line"><span class="attr">copyright_info:</span> <span class="string">此文章版權歸xxxxx所有，如有轉載，請註明來自原作者</span></span><br></pre></td></tr></table></figure>



<h3 id="文章打赏"><a href="#文章打赏" class="headerlink" title="文章打赏"></a>文章打赏</h3><p>在你每篇文章的结尾，可以添加打赏按钮。相关二维码可自行配置。</p>
<p>对于没有提供二维码的，可配置一张软件的 icon 图片，然后在 link 上添加相应的打赏链接，用户点击图片就会跳转到链接去。</p>
<p>link 可以不写，会默认为图片的链接。</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">reward:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">text:</span></span><br><span class="line">  <span class="attr">QR_code:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">img:</span> <span class="string">/img/wechat.jpg</span></span><br><span class="line">      <span class="attr">link:</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">微信</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">img:</span> <span class="string">/img/alipay.jpg</span></span><br><span class="line">      <span class="attr">link:</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">支付寶</span></span><br></pre></td></tr></table></figure>



<h3 id="TOC"><a href="#TOC" class="headerlink" title="TOC"></a>TOC</h3><p>在文章页，会有一个目录，用于展示 TOC。</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">toc:</span></span><br><span class="line">  <span class="attr">post:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">page:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">expand:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">style_simple:</span> <span class="literal">false</span> <span class="comment"># for post</span></span><br><span class="line">  <span class="attr">scroll_percent:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>属性</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>post</td>
<td>文章页是否显示 TOC</td>
</tr>
<tr>
<td>page</td>
<td>普通页面是否显示 TOC</td>
</tr>
<tr>
<td>number</td>
<td>是否显示章节数</td>
</tr>
<tr>
<td>expand</td>
<td>是否展开 TOC</td>
</tr>
<tr>
<td>style_simple</td>
<td>简介模式（侧边栏只显示 TOC，只对文章有效）</td>
</tr>
<tr>
<td>scroll_percent</td>
<td>是否显示滚动进度百分比</td>
</tr>
</tbody></table>
<h3 id="相关文章"><a href="#相关文章" class="headerlink" title="相关文章"></a>相关文章</h3><blockquote>
<p>当文章封面设置为 false 时，或者没有获取到封面配置，相关文章背景将会显示主题色</p>
</blockquote>
<p>相关文章推荐的原理是根据文章 tags 的比重来推荐</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">related_post:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">limit:</span> <span class="number">6</span> <span class="comment"># 顯示推薦文章數目</span></span><br><span class="line">  <span class="attr">date_type:</span> <span class="string">created</span> <span class="comment"># or created or updated 文章日期顯示創建日或者更新日</span></span><br></pre></td></tr></table></figure>



<h3 id="文章过期提醒"><a href="#文章过期提醒" class="headerlink" title="文章过期提醒"></a>文章过期提醒</h3><p>可设置是否显示文章过期提醒，以更新时间为基准。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Displays outdated notice for a post (文章過期提醒)</span></span><br><span class="line"><span class="attr">noticeOutdate:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">flat</span> <span class="comment"># style: simple/flat</span></span><br><span class="line">  <span class="attr">limit_day:</span> <span class="number">365</span> <span class="comment"># When will it be shown</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">top</span> <span class="comment"># position: top/bottom</span></span><br><span class="line">  <span class="attr">message_prev:</span> <span class="string">It</span> <span class="string">has</span> <span class="string">been</span></span><br><span class="line">  <span class="attr">message_next:</span> <span class="string">days</span> <span class="string">since</span> <span class="string">the</span> <span class="string">last</span> <span class="string">update,</span> <span class="string">the</span> <span class="string">content</span> <span class="string">of</span> <span class="string">the</span> <span class="string">article</span> <span class="string">may</span> <span class="string">be</span> <span class="string">outdated.</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>limit_day</code>：距离更新时间多少天才显示文章过期提醒</li>
<li><code>message_prev</code>：天数之前的文字</li>
<li><code>message_next</code>：天数之后的文字</li>
</ul>
<h3 id="文章编辑按钮"><a href="#文章编辑按钮" class="headerlink" title="文章编辑按钮"></a>文章编辑按钮</h3><p>在文章标题旁边显示一个编辑按钮，点击会调转到对应的链接去。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_edit:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/</span></span><br><span class="line">  <span class="comment"># For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/</span></span><br><span class="line">  <span class="attr">url:</span></span><br></pre></td></tr></table></figure>



<h3 id="文章分页按钮"><a href="#文章分页按钮" class="headerlink" title="文章分页按钮"></a>文章分页按钮</h3><blockquote>
<p>当文章封面设置为 false，或者没有获取到封面配置，分页背景将会显示主题色。</p>
</blockquote>
<p>可设置分页的逻辑，也可关闭分页显示</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_pagination:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>参数</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>post_pagination: false</td>
<td>关闭分页按钮</td>
</tr>
<tr>
<td>post_pagination: 1</td>
<td>下一篇显示的是旧文章</td>
</tr>
<tr>
<td>post_pagination: 2</td>
<td>下一篇显示的是新文章</td>
</tr>
</tbody></table>
<h2 id="Footer设置"><a href="#Footer设置" class="headerlink" title="Footer设置"></a>Footer设置</h2><h3 id="博客年份"><a href="#博客年份" class="headerlink" title="博客年份"></a>博客年份</h3><p><code>since</code> 是一个来展示你站点起始时间的选项，它位于页面的最底部。</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">footer:</span></span><br><span class="line">  <span class="attr">owner:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">since:</span> <span class="number">2018</span></span><br></pre></td></tr></table></figure>



<h3 id="页脚自定义文本"><a href="#页脚自定义文本" class="headerlink" title="页脚自定义文本"></a>页脚自定义文本</h3><p><code>custome_text</code> 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">custom_text:</span> <span class="string">Hi,</span> <span class="string">welcome</span> <span class="string">to</span> <span class="string">my</span> <span class="string">&lt;a</span> <span class="string">href=&quot;https://butterfly.js.org/&quot;&gt;blog&lt;/a&gt;!</span></span><br></pre></td></tr></table></figure>





<h2 id="侧边栏设置"><a href="#侧边栏设置" class="headerlink" title="侧边栏设置"></a>侧边栏设置</h2><h3 id="侧边栏排版"><a href="#侧边栏排版" class="headerlink" title="侧边栏排版"></a>侧边栏排版</h3><p>可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">aside:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hide:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">true</span> <span class="comment"># display on mobile</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">right</span> <span class="comment"># left or right</span></span><br><span class="line">  <span class="attr">display:</span></span><br><span class="line">    <span class="attr">archive:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tag:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">category:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">card_author:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">description:</span></span><br><span class="line">    <span class="attr">button:</span></span><br><span class="line">      <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-github</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">Follow</span> <span class="string">Me</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://github.com/xxxxxx</span></span><br><span class="line">  <span class="attr">card_announcement:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">content:</span> <span class="string">This</span> <span class="string">is</span> <span class="string">my</span> <span class="string">Blog</span></span><br><span class="line">  <span class="attr">card_recent_post:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">5</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line">    <span class="attr">sort:</span> <span class="string">date</span> <span class="comment"># date or updated</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_categories:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line">    <span class="attr">expand:</span> <span class="string">none</span> <span class="comment"># none/true/false</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_tags:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">40</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line">    <span class="attr">color:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">orderby:</span> <span class="string">random</span> <span class="comment"># Order of tags, random/name/length</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">1</span> <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_archives:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">monthly</span> <span class="comment"># yearly or monthly</span></span><br><span class="line">    <span class="attr">format:</span> <span class="string">MMMM</span> <span class="string">YYYY</span> <span class="comment"># eg: YYYY年MM月</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span> <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_webinfo:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">post_count:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">last_push_date:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_post_series:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">orderBy:</span> <span class="string">&#x27;date&#x27;</span> <span class="comment"># Order by title or date</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span> <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br></pre></td></tr></table></figure>



<h3 id="访问人数"><a href="#访问人数" class="headerlink" title="访问人数"></a>访问人数</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">busuanzi:</span></span><br><span class="line">  <span class="attr">site_uv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">site_pv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">page_pv:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>



<h3 id="运行时间"><a href="#运行时间" class="headerlink" title="运行时间"></a>运行时间</h3><p>网页已运行时间</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">runtimeshow:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">publish_date:</span> <span class="number">6</span><span class="string">/7/2018</span> <span class="number">00</span><span class="string">:00:00</span>  </span><br><span class="line">  <span class="comment">##網頁開通時間</span></span><br><span class="line">  <span class="comment">#格式: 月/日/年 時間</span></span><br><span class="line">  <span class="comment">#也可以寫成 年/月/日 時間</span></span><br></pre></td></tr></table></figure>



<h2 id="右下角按钮"><a href="#右下角按钮" class="headerlink" title="右下角按钮"></a>右下角按钮</h2><h3 id="简繁转换"><a href="#简繁转换" class="headerlink" title="简繁转换"></a>简繁转换</h3><p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">translate:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 默認按鈕顯示文字(網站是簡體，應設置為&#x27;default: 繁&#x27;)</span></span><br><span class="line">  <span class="attr">default:</span> <span class="string">簡</span></span><br><span class="line">  <span class="comment">#網站默認語言，1: 繁體中文, 2: 簡體中文</span></span><br><span class="line">  <span class="attr">defaultEncoding:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment">#延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0</span></span><br><span class="line">  <span class="attr">translateDelay:</span> <span class="number">0</span></span><br><span class="line">  <span class="comment">#當文字是簡體時，按鈕顯示的文字</span></span><br><span class="line">  <span class="attr">msgToTraditionalChinese:</span> <span class="string">&quot;繁&quot;</span></span><br><span class="line">  <span class="comment">#當文字是繁體時，按鈕顯示的文字</span></span><br><span class="line">  <span class="attr">msgToSimplifiedChinese:</span> <span class="string">&quot;簡&quot;</span></span><br></pre></td></tr></table></figure>



<h3 id="阅读模式"><a href="#阅读模式" class="headerlink" title="阅读模式"></a>阅读模式</h3><p>阅读模式下会去掉文章外的内容，避免干扰阅读。</p>
<p>只会出现在文章页面，右下角会有阅读模式按钮。</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">readmode:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>



<h3 id="夜间模式"><a href="#夜间模式" class="headerlink" title="夜间模式"></a>夜间模式</h3><p>右下角会有页面模式按钮。</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">darkmode:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># dark mode和 light mode切換按鈕</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">autoChangeMode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18</span></span><br><span class="line">  <span class="attr">start:</span> <span class="comment"># 8</span></span><br><span class="line">  <span class="attr">end:</span> <span class="comment"># 22</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>参数</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>button</td>
<td>是否在右下角显示日夜模式切换按钮</td>
</tr>
<tr>
<td>autoChangeMode</td>
<td>自动切换的模式<br />autoChangeMode：1 跟随系统而变化，不支持的浏览器&#x2F;系统将按照时间 start 到 end 之间切换为 light mode<br />autoChangeMode：2 只按照 start 和 end 之间切换为 light mode，其余时间为 dark mode<br />autoChangeMode: false 取消自动切换</td>
</tr>
<tr>
<td>start</td>
<td>light mode 的开始时间</td>
</tr>
<tr>
<td>end</td>
<td>light mode 的结束时间</td>
</tr>
</tbody></table>
<h3 id="滚动状态百分比"><a href="#滚动状态百分比" class="headerlink" title="滚动状态百分比"></a>滚动状态百分比</h3><p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">rightside_scroll_percent:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>



<h2 id="标签外挂"><a href="#标签外挂" class="headerlink" title="标签外挂"></a>标签外挂</h2><blockquote>
<p>标签外挂是 Hexo 独有的功能，并不是标准的 markdown 格式。</p>
<p>以下的写法，只适用于 Butterfly 主题，用在其它主题上不会有效果，甚至可能报错。使用前请留意。</p>
</blockquote>
<blockquote>
<p>标签外挂虽然能为主题带来一些额外的功能和UI方面的强化，但是，标签外挂也有明显的限制，使用时请留意。</p>
</blockquote>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">note:</span></span><br><span class="line">  <span class="comment"># Note tag style values:</span></span><br><span class="line">  <span class="comment">#  - simple    bs-callout old alert style. Default.</span></span><br><span class="line">  <span class="comment">#  - modern    bs-callout new (v2-v3) alert style.</span></span><br><span class="line">  <span class="comment">#  - flat      flat callout style with background, like on Mozilla or StackOverflow.</span></span><br><span class="line">  <span class="comment">#  - disabled  disable all CSS styles import of note tag.</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">simple</span></span><br><span class="line">  <span class="attr">icons:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">border_radius:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class="line">  <span class="comment"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class="line">  <span class="attr">light_bg_offset:</span> <span class="number">0</span></span><br></pre></td></tr></table></figure>

<p><code>icons</code>和<code>light_bg_offset</code>只對<em>方法一</em>生效</p>
<h3 id="Gallary相册图库"><a href="#Gallary相册图库" class="headerlink" title="Gallary相册图库"></a>Gallary相册图库</h3><blockquote>
<p>2.2.0 以上提供</p>
</blockquote>
<p>一个图库集合。写法：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&lt;div</span> <span class="string">class=&quot;gallery-group-main&quot;&gt;</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">galleryGroup</span> <span class="string">name</span> <span class="string">description</span> <span class="string">link</span> <span class="string">img-url</span> <span class="string">%</span>&#125;</span><br><span class="line">&#123;<span class="string">%</span> <span class="string">galleryGroup</span> <span class="string">name</span> <span class="string">description</span> <span class="string">link</span> <span class="string">img-url</span> <span class="string">%</span>&#125;</span><br><span class="line">&#123;<span class="string">%</span> <span class="string">galleryGroup</span> <span class="string">name</span> <span class="string">description</span> <span class="string">link</span> <span class="string">img-url</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="string">&lt;/div&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>name：图库名字</li>
<li>description：图库描述</li>
<li>link：连接到对应相册的地址</li>
<li>img-url：图库封面的地址</li>
</ul>
<p>例如：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&lt;div</span> <span class="string">class=&quot;gallery-group-main&quot;&gt;</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">galleryGroup</span> <span class="string">&#x27;壁紙&#x27;</span> <span class="string">&#x27;收藏的一些壁紙&#x27;</span> <span class="string">&#x27;/Gallery/wallpaper&#x27;</span> <span class="string">https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png</span> <span class="string">%</span>&#125;</span><br><span class="line">&#123;<span class="string">%</span> <span class="string">galleryGroup</span> <span class="string">&#x27;漫威&#x27;</span> <span class="string">&#x27;關於漫威的圖片&#x27;</span> <span class="string">&#x27;/Gallery/marvel&#x27;</span> <span class="string">https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg</span> <span class="string">%</span>&#125;</span><br><span class="line">&#123;<span class="string">%</span> <span class="string">galleryGroup</span> <span class="string">&#x27;OH MY GIRL&#x27;</span> <span class="string">&#x27;關於OH MY GIRL的圖片&#x27;</span> <span class="string">&#x27;/Gallery/ohmygirl&#x27;</span> <span class="string">https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="string">&lt;/div&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="Gallary相册"><a href="#Gallary相册" class="headerlink" title="Gallary相册"></a>Gallary相册</h3><blockquote>
<p>2.2.0 以上提供</p>
</blockquote>
<p>区别于旧版的Gallery相册，新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入相应的 md。</p>
<p>写法：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">gallery</span> [<span class="string">lazyload</span>],[<span class="string">rowHeight</span>],[<span class="string">limit</span>] <span class="string">%</span>&#125;</span><br><span class="line"><span class="string">markdown</span> <span class="string">圖片格式</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">endgallery</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>参数</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>lazyload</td>
<td>【可选】点击按钮加载更多图片，填写 true&#x2F;false。默认为 <code>false</code>。</td>
</tr>
<tr>
<td>rowHeight</td>
<td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td>
</tr>
<tr>
<td>limit</td>
<td>【可选】每次加载多少张图片。默认为 <code>10</code>。</td>
</tr>
</tbody></table>
<p>示例：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">gallery</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="string">markdown</span> <span class="string">圖片格式</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">endgallery</span> <span class="string">%</span>&#125;</span><br><span class="line"></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">gallery</span> <span class="literal">true</span>,<span class="number">220</span>,<span class="number">10</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="string">markdown</span> <span class="string">圖片格式</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">endgallery</span> <span class="string">%</span>&#125;</span><br><span class="line"></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">gallery</span> <span class="literal">true</span>,,<span class="number">10</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="string">markdown</span> <span class="string">圖片格式</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">endgallery</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>

<p>例如：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">gallery</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">endgallery</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>



<h3 id="tag-hide"><a href="#tag-hide" class="headerlink" title="tag-hide"></a>tag-hide</h3><blockquote>
<p>2.2.0 以上提供</p>
<p>请注意，tag-hide 内的标签外挂 content 内都不建议有 h1-h6 等标题。因为 TOC 会把隐藏内容也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致 TOC 的滚动出现异常。</p>
</blockquote>
<p>如果你想把一些文字，内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">hideInline</span> <span class="string">content</span>,<span class="string">display</span>,<span class="string">bg</span>,<span class="string">color</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>content：文本内容</li>
<li>display：按钮显示的文字（可选）</li>
<li>bg：按钮的背景颜色（可选）</li>
<li>color：按钮文字的颜色（可选）</li>
</ul>
<blockquote>
<p>Demo</p>
</blockquote>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">哪個英文字母最酷？</span> &#123;<span class="string">%</span> <span class="string">hideInline</span> <span class="string">因為西裝褲(C裝酷)</span>,<span class="string">查看答案</span>,<span class="comment">#FF7242,#fff %&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="string">門裏站着一個人?</span> &#123;<span class="string">%</span> <span class="string">hideInline</span> <span class="string">閃</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>

<p>哪個英文字母最酷？ <span class="hide-inline"><button type="button" class="hide-button" style="background-color: #FF7242;color: #fff">查看答案
  </button><span class="hide-content">因為西裝褲(C裝酷)</span></span></p>
<p>門裏站着一個人? <span class="hide-inline"><button type="button" class="hide-button" style="">Click
  </button><span class="hide-content">閃</span></span></p>
<h3 id="mermaid"><a href="#mermaid" class="headerlink" title="mermaid"></a>mermaid</h3><p>使用 mermaid 标签可以绘制 Flowchart(流程图)、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看<a target="_blank" rel="noopener" href="https://mermaid-js.github.io/mermaid/#/">mermaid文档</a></p>
<p>修改主题配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># mermaid</span></span><br><span class="line"><span class="comment"># see https://github.com/mermaid-js/mermaid</span></span><br><span class="line"><span class="attr">mermaid:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># built-in themes: default/forest/dark/neutral</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">default</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br></pre></td></tr></table></figure>

<p>写法：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">內容</span><br><span class="line">&#123;% endmermaid %&#125;</span><br></pre></td></tr></table></figure>

<p>例如：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">mermaid</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="string">pie</span></span><br><span class="line">    <span class="string">title</span> <span class="string">Key</span> <span class="string">elements</span> <span class="string">in</span> <span class="string">Product</span> <span class="string">X</span></span><br><span class="line">    <span class="string">&quot;Calcium&quot;</span> <span class="string">:</span> <span class="number">42.96</span></span><br><span class="line">    <span class="string">&quot;Potassium&quot;</span> <span class="string">:</span> <span class="number">50.05</span></span><br><span class="line">    <span class="string">&quot;Magnesium&quot;</span> <span class="string">:</span> <span class="number">10.01</span></span><br><span class="line">    <span class="string">&quot;Iron&quot;</span> <span class="string">:</span>  <span class="number">5</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">endmermaid</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>





<h3 id="label"><a href="#label" class="headerlink" title="label"></a>label</h3><blockquote>
<p>由于 hexo 的渲染限制，在段落开头使用 label 标签外挂会出现一些问题。例如：连续开头使用 label 标签外挂的段落无法换行</p>
<p>建议不要在段落开头使用 label 标签外挂</p>
</blockquote>
<p>高亮所需的文字</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">label</span> <span class="string">text</span> <span class="string">color</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>参数</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td>文字</td>
</tr>
<tr>
<td>color</td>
<td>【可选】背景颜色，默认为 <code>default</code> default&#x2F;blue&#x2F;pink&#x2F;red&#x2F;purple&#x2F;orange&#x2F;green</td>
</tr>
</tbody></table>
<blockquote>
<p>Demo</p>
</blockquote>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">臣亮言：&#123;%</span> <span class="string">label</span> <span class="string">先帝</span> <span class="string">%&#125;創業未半，而&#123;%</span> <span class="string">label</span> <span class="string">中道崩殂</span> <span class="string">blue</span> <span class="string">%&#125;。今天下三分，&#123;%</span> <span class="string">label</span> <span class="string">益州疲敝</span> <span class="string">pink</span> <span class="string">%&#125;，此誠&#123;%</span> <span class="string">label</span> <span class="string">危急存亡之秋</span> <span class="string">red</span> <span class="string">%&#125;也！然侍衞之臣，不懈於內；&#123;%</span> <span class="string">label</span> <span class="string">忠志之士</span> <span class="string">purple</span> <span class="string">%&#125;，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。</span></span><br><span class="line"><span class="string">宮中、府中，俱為一體；陟罰臧否，不宜異同。若有&#123;%</span> <span class="string">label</span> <span class="string">作奸</span> <span class="string">orange</span> <span class="string">%&#125;、&#123;%</span> <span class="string">label</span> <span class="string">犯科</span> <span class="string">green</span> <span class="string">%&#125;，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。</span></span><br></pre></td></tr></table></figure>

<p>臣亮言：<mark class="hl-label default">先帝</mark> 創業未半，而<mark class="hl-label blue">中道崩殂</mark> 。今天下三分，<mark class="hl-label pink">益州疲敝</mark> ，此誠<mark class="hl-label red">危急存亡之秋</mark> 也！然侍衞之臣，不懈於內；<mark class="hl-label purple">忠志之士</mark> ，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。<br>宮中、府中，俱為一體；陟罰臧否，不宜異同。若有<mark class="hl-label orange">作奸</mark> 、<mark class="hl-label green">犯科</mark> ，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。</p>
<h3 id="timeline"><a href="#timeline" class="headerlink" title="timeline"></a>timeline</h3><blockquote>
<p>4.0.0 以上支持</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline title,color %&#125;</span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line">xxxxx</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line">xxxxx</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>参数</th>
<th>解释</th>
</tr>
</thead>
<tbody><tr>
<td>title</td>
<td>标题&#x2F;时间线</td>
</tr>
<tr>
<td>color</td>
<td>timeline 颜色 default(留空) &#x2F; blue &#x2F; pink &#x2F; red &#x2F; purple &#x2F; orange &#x2F; green</td>
</tr>
</tbody></table>
<blockquote>
<p>Demo</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022 %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line">這是測試頁面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>

<div class="timeline pink"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p>
</div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p>
</div></div><div class='timeline-item-content'><p>這是測試頁面</p>
</div></div></div>



<h3 id="flink"><a href="#flink" class="headerlink" title="flink"></a>flink</h3><blockquote>
<p>4.1.0 支持</p>
</blockquote>
<p>可在任何界面插入类似友情链接的效果</p>
<p>内容格式与友情链接界面一样，支持 yml 格式</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">flink</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="string">xxxxxx</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">endflink</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>



<blockquote>
<p>Demo</p>
</blockquote>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">flink</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">友情鏈接</span></span><br><span class="line">  <span class="attr">class_desc:</span> <span class="string">那些人，那些事</span></span><br><span class="line">  <span class="attr">link_list:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">JerryC</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://jerryc.me/</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">https://jerryc.me/img/avatar.png</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">今日事,今日畢</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Hexo</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://hexo.io/zh-tw/</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">快速、簡單且強大的網誌框架</span></span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">網站</span></span><br><span class="line">  <span class="attr">class_desc:</span> <span class="string">值得推薦的網站</span></span><br><span class="line">  <span class="attr">link_list:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Youtube</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://www.youtube.com/</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">視頻網站</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Weibo</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://www.weibo.com/</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">中國最大社交分享平台</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Twitter</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://twitter.com/</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">社交分享平台</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">endflink</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>

<div class="flink"><div class="flink-name">友情鏈接</div><div class="flink-desc">那些人，那些事</div> <div class="flink-list">
          <div class="flink-list-item">
            <a href="https://jerryc.me/" title="JerryC" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src="https://jerryc.me/img/avatar.png" onerror='this.onerror=null;this.src="/blog/img/friend_404.gif"' alt="JerryC" />
              </div>
              <div class="flink-item-name">JerryC</div> 
              <div class="flink-item-desc" title="今日事,今日畢">今日事,今日畢</div>
            </a>
          </div>
          <div class="flink-list-item">
            <a href="https://hexo.io/zh-tw/" title="Hexo" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src="https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg" onerror='this.onerror=null;this.src="/blog/img/friend_404.gif"' alt="Hexo" />
              </div>
              <div class="flink-item-name">Hexo</div> 
              <div class="flink-item-desc" title="快速、簡單且強大的網誌框架">快速、簡單且強大的網誌框架</div>
            </a>
          </div></div><div class="flink-name">網站</div><div class="flink-desc">值得推薦的網站</div> <div class="flink-list">
          <div class="flink-list-item">
            <a href="https://www.youtube.com/" title="Youtube" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src="https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png" onerror='this.onerror=null;this.src="/blog/img/friend_404.gif"' alt="Youtube" />
              </div>
              <div class="flink-item-name">Youtube</div> 
              <div class="flink-item-desc" title="視頻網站">視頻網站</div>
            </a>
          </div>
          <div class="flink-list-item">
            <a href="https://www.weibo.com/" title="Weibo" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src="https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png" onerror='this.onerror=null;this.src="/blog/img/friend_404.gif"' alt="Weibo" />
              </div>
              <div class="flink-item-name">Weibo</div> 
              <div class="flink-item-desc" title="中國最大社交分享平台">中國最大社交分享平台</div>
            </a>
          </div>
          <div class="flink-list-item">
            <a href="https://twitter.com/" title="Twitter" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" onerror='this.onerror=null;this.src="/blog/img/friend_404.gif"' alt="Twitter" />
              </div>
              <div class="flink-item-name">Twitter</div> 
              <div class="flink-item-desc" title="社交分享平台">社交分享平台</div>
            </a>
          </div></div></div>



<h3 id="abcjs乐谱"><a href="#abcjs乐谱" class="headerlink" title="abcjs乐谱"></a>abcjs乐谱</h3><p>在页面上渲染乐谱</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># abcjs (樂譜渲染)</span></span><br><span class="line"><span class="comment"># See https://github.com/paulrosen/abcjs</span></span><br><span class="line"><span class="comment"># ---------------</span></span><br><span class="line"><span class="attr">abcjs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>写法：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% score %&#125;</span><br><span class="line">乐谱代码</span><br><span class="line">&#123;% endscore %&#125;</span><br></pre></td></tr></table></figure>



<blockquote>
<p>Demo</p>
</blockquote>
<div class="abc-music-sheet">X:1
T:alternate heads
M:C
L:1/8
U:n=!style=normal!
K:C treble style=rhythm
&quot;Am&quot; BBBB B2 B&gt;B | &quot;Dm&quot; B2 B/B/B &quot;C&quot; B4 |&quot;Am&quot; B2 nGnB B2 nGnA | &quot;Dm&quot; nDB/B/ nDB/B/ &quot;C&quot; nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |]
%%text This translates to:
[M:C][K:style=normal]
[A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]&gt;[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |]
GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb|
[K: style=x]
C/A,/ C/C/E C/zz2|
w:Rock-y did-nt like that</div>





<h3 id="series系列文章"><a href="#series系列文章" class="headerlink" title="series系列文章"></a>series系列文章</h3><p>在页面上显示系列文章</p>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">series:</span></span><br><span class="line">   <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">   <span class="attr">orderBy:</span> <span class="string">&#x27;title&#x27;</span> <span class="comment"># Order by title or date</span></span><br><span class="line">   <span class="attr">order:</span> <span class="number">1</span> <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">   <span class="attr">number:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>写法：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">series</span> <span class="string">%</span>&#125;</span><br><span class="line">&#123;<span class="string">%</span> <span class="string">series</span> [<span class="string">series</span> <span class="string">name</span>] <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>

<p>在文章的<code>Front-matter</code>上添加参数 series，并给予一个标识。</p>
<p>使用此标签外挂，会把相同标识的文章以列表的形式展示。</p>
<p>如果不写 series 标识，则默认为你使用此标签外挂所在的文章的 series 标识。</p>
<blockquote>
<p>Demo</p>
</blockquote>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">series</span> <span class="string">markdown</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure>

</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="http://localhost:4000/blog">coderyh</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="http://localhost:4000/blog/20231208180125/">http://localhost:4000/blog/20231208180125/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://localhost:4000/blog" target="_blank">小苑の博客</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/blog/tags/Hexo/">Hexo</a><a class="post-meta__tags" href="/blog/tags/Butterfly/">Butterfly</a></div><div class="post_share"><div class="social-share" data-image="http://localhost:8080/image?1702029685000" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/blog/20231209002548/" title="Butterfly-主题配置-2"><img class="cover" src="http://localhost:8080/image?1702052748000" onerror="onerror=null;src='/blog/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Butterfly-主题配置-2</div></div></a></div><div class="next-post pull-right"><a href="/blog/20231207162103/" title="Hexo-搭建个人博客网站"><img class="cover" src="http://localhost:8080/image?1701937263000" onerror="onerror=null;src='/blog/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Hexo-搭建个人博客网站</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/blog/20231209013202/" title="Butterfly-主题页面"><img class="cover" src="http://localhost:8080/image?1702056722000" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-12-09</div><div class="title">Butterfly-主题页面</div></div></a></div><div><a href="/blog/20231209002548/" title="Butterfly-主题配置-2"><img class="cover" src="http://localhost:8080/image?1702052748000" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-12-09</div><div class="title">Butterfly-主题配置-2</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%AD%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">语言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%BC%E8%88%AA%E6%A0%8F%E8%AE%BE%E7%BD%AE"><span class="toc-number">2.</span> <span class="toc-text">导航栏设置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%82%E6%95%B0%E8%AE%BE%E7%BD%AE"><span class="toc-number">2.1.</span> <span class="toc-text">参数设置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8F%9C%E5%8D%95-%E7%9B%AE%E5%BD%95"><span class="toc-number">2.2.</span> <span class="toc-text">菜单&#x2F;目录</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%EF%BC%88Code-Blocks%EF%BC%89"><span class="toc-number">3.</span> <span class="toc-text">代码（Code Blocks）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE"><span class="toc-number">3.1.</span> <span class="toc-text">代码高亮</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E5%A4%8D%E5%88%B6"><span class="toc-number">3.2.</span> <span class="toc-text">代码复制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E6%A1%86%E5%B1%95%E5%BC%80-%E5%85%B3%E9%97%AD"><span class="toc-number">3.3.</span> <span class="toc-text">代码框展开&#x2F;关闭</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E6%8D%A2%E8%A1%8C"><span class="toc-number">3.4.</span> <span class="toc-text">代码换行</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E9%AB%98%E5%BA%A6%E9%99%90%E5%88%B6"><span class="toc-number">3.5.</span> <span class="toc-text">代码高度限制</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A4%BE%E4%BA%A4%E5%9B%BE%E6%A0%87%EF%BC%88Social-Settings%EF%BC%89"><span class="toc-number">4.</span> <span class="toc-text">社交图标（Social Settings）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%B4%E5%83%8F"><span class="toc-number">5.</span> <span class="toc-text">头像</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B6%E9%83%A8%E5%9B%BE"><span class="toc-number">6.</span> <span class="toc-text">顶部图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E5%B0%81%E9%9D%A2"><span class="toc-number">7.</span> <span class="toc-text">文章封面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2-meta-%E6%98%BE%E7%A4%BA"><span class="toc-number">8.</span> <span class="toc-text">页面 meta 显示</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BB%E9%A1%B5%E6%96%87%E7%AB%A0%E7%AD%9B%E9%80%89"><span class="toc-number">9.</span> <span class="toc-text">主页文章筛选</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E9%94%9A%E7%82%B9"><span class="toc-number">10.</span> <span class="toc-text">页面锚点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%8D%E5%88%B6%E7%9B%B8%E5%85%B3%E9%85%8D%E7%BD%AE"><span class="toc-number">11.</span> <span class="toc-text">复制相关配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E9%A1%B5%E7%9B%B8%E5%85%B3%E9%85%8D%E7%BD%AE"><span class="toc-number">12.</span> <span class="toc-text">文章页相关配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E7%89%88%E6%9D%83"><span class="toc-number">12.1.</span> <span class="toc-text">文章版权</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E6%89%93%E8%B5%8F"><span class="toc-number">12.2.</span> <span class="toc-text">文章打赏</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#TOC"><span class="toc-number">12.3.</span> <span class="toc-text">TOC</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%B8%E5%85%B3%E6%96%87%E7%AB%A0"><span class="toc-number">12.4.</span> <span class="toc-text">相关文章</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E8%BF%87%E6%9C%9F%E6%8F%90%E9%86%92"><span class="toc-number">12.5.</span> <span class="toc-text">文章过期提醒</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E7%BC%96%E8%BE%91%E6%8C%89%E9%92%AE"><span class="toc-number">12.6.</span> <span class="toc-text">文章编辑按钮</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E5%88%86%E9%A1%B5%E6%8C%89%E9%92%AE"><span class="toc-number">12.7.</span> <span class="toc-text">文章分页按钮</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Footer%E8%AE%BE%E7%BD%AE"><span class="toc-number">13.</span> <span class="toc-text">Footer设置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%9A%E5%AE%A2%E5%B9%B4%E4%BB%BD"><span class="toc-number">13.1.</span> <span class="toc-text">博客年份</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E8%84%9A%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E6%9C%AC"><span class="toc-number">13.2.</span> <span class="toc-text">页脚自定义文本</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E8%AE%BE%E7%BD%AE"><span class="toc-number">14.</span> <span class="toc-text">侧边栏设置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E6%8E%92%E7%89%88"><span class="toc-number">14.1.</span> <span class="toc-text">侧边栏排版</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BF%E9%97%AE%E4%BA%BA%E6%95%B0"><span class="toc-number">14.2.</span> <span class="toc-text">访问人数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4"><span class="toc-number">14.3.</span> <span class="toc-text">运行时间</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%B3%E4%B8%8B%E8%A7%92%E6%8C%89%E9%92%AE"><span class="toc-number">15.</span> <span class="toc-text">右下角按钮</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%80%E7%B9%81%E8%BD%AC%E6%8D%A2"><span class="toc-number">15.1.</span> <span class="toc-text">简繁转换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%98%85%E8%AF%BB%E6%A8%A1%E5%BC%8F"><span class="toc-number">15.2.</span> <span class="toc-text">阅读模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%9C%E9%97%B4%E6%A8%A1%E5%BC%8F"><span class="toc-number">15.3.</span> <span class="toc-text">夜间模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%BB%9A%E5%8A%A8%E7%8A%B6%E6%80%81%E7%99%BE%E5%88%86%E6%AF%94"><span class="toc-number">15.4.</span> <span class="toc-text">滚动状态百分比</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E5%A4%96%E6%8C%82"><span class="toc-number">16.</span> <span class="toc-text">标签外挂</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Gallary%E7%9B%B8%E5%86%8C%E5%9B%BE%E5%BA%93"><span class="toc-number">16.1.</span> <span class="toc-text">Gallary相册图库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Gallary%E7%9B%B8%E5%86%8C"><span class="toc-number">16.2.</span> <span class="toc-text">Gallary相册</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#tag-hide"><span class="toc-number">16.3.</span> <span class="toc-text">tag-hide</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#mermaid"><span class="toc-number">16.4.</span> <span class="toc-text">mermaid</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#label"><span class="toc-number">16.5.</span> <span class="toc-text">label</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#timeline"><span class="toc-number">16.6.</span> <span class="toc-text">timeline</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#flink"><span class="toc-number">16.7.</span> <span class="toc-text">flink</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#abcjs%E4%B9%90%E8%B0%B1"><span class="toc-number">16.8.</span> <span class="toc-text">abcjs乐谱</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#series%E7%B3%BB%E5%88%97%E6%96%87%E7%AB%A0"><span class="toc-number">16.9.</span> <span class="toc-text">series系列文章</span></a></li></ol></li></ol></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2023 - 2024 By coderyh</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">页脚自定义文本</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/blog/js/utils.js"></script><script src="/blog/js/main.js"></script><script src="/blog/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><div class="js-pjax"><script>(() => {
  const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
  if ($mermaid.length === 0) return
  const runMermaid = () => {
    window.loadMermaid = true
    const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'

    Array.from($mermaid).forEach((item, index) => {
      const mermaidSrc = item.firstElementChild
      const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
      const mermaidID = 'mermaid-' + index
      const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent

      const renderFn = mermaid.render(mermaidID, mermaidDefinition)

      const renderV10 = () => {
        renderFn.then(({svg}) => {
          mermaidSrc.insertAdjacentHTML('afterend', svg)
        })
      }

      const renderV9 = svg => {
        mermaidSrc.insertAdjacentHTML('afterend', svg)
      }

      typeof renderFn === 'string' ? renderV9(renderFn) : renderV10()
    })
  }

  const loadMermaid = () => {
    window.loadMermaid ? runMermaid() : getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaid)
  }

  btf.addGlobalFn('themeChange', runMermaid, 'mermaid')

  window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
})()</script><script>(() => {
  const abcjsInit = () => {
    const abcjsFn = () => {
      document.querySelectorAll(".abc-music-sheet").forEach(ele => {
        ABCJS.renderAbc(ele, ele.innerHTML, {responsive: 'resize'})
      })
    }
    
    typeof ABCJS === 'object' ? abcjsFn()
      : getScript('https://cdn.jsdelivr.net/npm/abcjs/dist/abcjs-basic-min.min.js').then(abcjsFn)
  }

  window.pjax ? abcjsInit() : window.addEventListener('load', abcjsInit)
})()</script></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="true"></script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="false"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/blog/js/search/local-search.js"></script></div></div></body></html>